<template>
  <div>
    <gm-nav></gm-nav>
    <div class="main-container">
      <div class="title-box">
        {{ title }}
      </div>
      <el-row :gutter="20">
        <el-col v-for="item in cList" :key="item.postid" :span="6">
          <div class="grid-content bg-purple">
            <searchList :searchInfo="item"></searchList>
          </div>
        </el-col>
      </el-row>
      <div class="loading" v-loading="loading"></div>
    </div>

    <gm-footer></gm-footer>
  </div>
</template>

<script>
import gmNav from "../components/gmNav.vue";
import gmFooter from "@/components/gmFooter.vue";
import searchList from "@/components/gmSearchList.vue";

export default {
  name: "channelList",
  data() {
    return {
      cList: [],
      id: null,
      pNum: 1,
      title: "",
      loading: false,
      isLoading: false,
    };
  },
  components: {
    gmNav,
    gmFooter,
    searchList,
  },
  methods: {
    loadData() {
      this.loading = true;
      this.isLoading = true;
      let url = `https://apis.netstart.cn/vmovier/cate/getPostInCate?p=${this.pNum}&size=12&cateid=${this.id}`;
      let gms = axios.get(url);
      gms.then((res) => {
        let resData = res.data.data;
        resData.forEach((item) => {
          this.cList.push(item);
        });
        this.pNum++;
        console.log(this.cList);
        this.title = res.data.data[0].cates[0].catename;
        this.loading = false;
        this.isLoading = false;
      });
    },
    scrollHande() {
      if (this.isLoading) return;
      let scrollHeight = document.documentElement.scrollHeight;
      let innerHeight = window.innerHeight;
      let scrollTop = document.documentElement.scrollTop;
      if (scrollHeight - innerHeight - scrollTop < 140) {
        this.loadData();
      }
    },
  },
  created() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
    }
    this.loadData();
    window.addEventListener("scroll", this.scrollHande);
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  width: 1180px;
  margin: 0 auto;
  .title-box {
    font-size: 28px;
    color: #666;
    line-height: 40px;
    margin-bottom: 20px;
  }
  .loading {
    margin: 40px 0 90px 0;
  }
}
</style>